<template>
  <div>
        <div class="header">
            <span>第{{itemNum}}题</span>
        </div>

        <div class="content">
            <p>题目{{itemNum}}</p>
            <ul>
                <li :class="styleArr[index]" v-for = "(answer,index) in curentItem.topic_answer" :key="index" @click="selected(index)"> {{answer.answer_name}}</li>
            </ul>
        </div>

        <div class="button" v-if="itemNum<itemDetail.length" @click="submit"></div>
        <div class="button1" v-else @click="submitAnswer"></div>
    </div>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex'

export default {
    name:'Item',
    data(){
         return {
            styleArr:['normal','normal','normal','normal'],
            selected_id:null
         }
    },
    mounted(){
        this.COUNT_TIME();
    },
    computed:{
        ...mapState(['itemNum','itemDetail']),
        ...mapGetters(['curentItem'])
    },
    methods:{
        ...mapMutations(['NEXT','COUNT_TIME']),
        selected(answer_id){
            this.styleArr=['normal','normal','normal','normal'];
            this.styleArr[answer_id]='selected';
            this.selected_id=answer_id;
        },
        submit(){
            if(this.selected_id==null){
                alert('请选择一个答案哦');
                return;
            }

            this.NEXT(this.selected_id);
            this.styleArr=['normal','normal','normal','normal'];
            this.selected_id=null;
        },
        submitAnswer(){
            if(this.selected_id==null){
                alert('请选择一个答案哦');
                return;
            }
            this.NEXT(this.selected_id);
            this.$router.push('score');
        }
    }
}
</script>

<style lang="css" scoped>

    .header {
        position: relative;
        top: 0;
        margin-left: 200px;
        background: url('../assets/images/WechatIMG2.png') no-repeat;
        background-size: 100% 100%;
        width: 120px;
        height: 150px;
    }

    .header span {
        position:absolute;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        color: orange;
        left: 37px;
        bottom:16px;
    }

    .content {
        position: relative;
        background: url('../assets/images/2-1.png') no-repeat;
        background-size: 100% 100%;
        width: 300px;
        height: 260px;
        margin: 0 40px;
    }

    .content p {
        position: absolute;
        left: 60px;
        top: 30px;
        color: white;
        font-size: 18px;
        font-weight: 100;
        padding: 10px 0;
    }

    .content ul {
        position: absolute;
        left: 60px;
        top: 70px;
    }

    .content li {
        font-size: 18px;
        font-weight: 100;
        list-style: upper-alpha;
        padding-top: 2px;
    }

    .button {
        background: url('../assets/images/2-2.png') no-repeat;
        background-size: 100% 100%;
        width: 100px;
        height: 60px;
        margin: 10px auto;
    }

    .button1 {
        background: url('../assets/images/3-1.png') no-repeat;
        background-size: 100% 100%;
        width: 100px;
        height: 60px;
        margin: 10px auto;
    }

    .normal {
        color: cornflowerblue;
    }

    .selected {
        color: green;
    }

</style>